<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3dChange</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #app {
            background: #000;
            height: 100vh;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .imgsBox {
            width: 80vw;
            height: 142.2vw;
            position: relative;
        }

        .imgBox {
            height: 100%;
            width: 100%;
            font-size: 0;
            border-radius: 8px;
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
            /* box-shadow: rgba() */
            z-index: 0;
            transform: scale(0.5);
            -webkit-filter: blur(3px);
            filter: blur(3px);
        }

        .imgBox:nth-child(1) {
            top: -15px;
            z-index: 10;
            transform: scaleX(1);
            transform-origin: 50% 50%;
            -webkit-filter: blur(0px);
            filter: blur(0px);
        }

        .imgBox:nth-child(2) {
            top: 0px;
            z-index: 5;
            transform: scaleX(0.9);
        }

        .imgBox:nth-child(3) {
            top: 15px;
            z-index: 1;
            transform: scaleX(0.8);
        }

        .imgBox.last1 {
            top: -15px;
            z-index: 10;
            transform: scaleX(1);
            transform-origin: 50% 50%;
            transition: all 0.1s;
            -webkit-filter: blur(0px);
            filter: blur(0px);
        }

        .imgBox.last2 {
            top: 0px;
            z-index: 5;
            transform: scaleX(0.9);
            transition: all 0.1s;
        }

        .imgBox.last3 {
            top: 15px;
            z-index: 1;
            transform: scaleX(0.8);
            transition: all 0.1s;
        }


        .imgBox div {
            height: 100%;
            width: 100%;
        }
    </style>
</head>

<body>

    <div id="app">
        <div class="imgsBox">
            <div :class="[isFinish && index >=1 && index<=3 ?'imgBox last' + index :'imgBox']"
                v-for="(item,index) in list" @touchstart="touchstart" @touchmove="touchemove" @touchend="touchend"
                :data-index="index">
                <div
                    :style="{backgroundImage: 'url(' + (item) + ')', backgroundSize:'cover', backgroundRepeat: 'no-repeat'}">
                </div>
            </div>
        </div>
    </div>

    <script src="./js/vue.min.js"></script>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                list: [
                    "./img/1.jpeg",
                    "./img/2.jpeg",
                    "./img/3.jpeg",
                    "./img/4.jpeg",
                    "./img/5.jpeg",
                    "./img/6.jpeg",
                    "./img/7.jpeg",
                    "./img/8.jpeg",
                    "./img/9.jpeg",
                ],
                startX: 0,
                startY: 0,
                xDirect: 'left',
                yDirect: 'top',
                translateX: 0,
                translateY: 0,
                isFinish: false
            },
            methods: {

                handleList() {
                    let last = this.list[0];
                    this.list.splice(0, 1);
                    this.list.push(last)
                },


                touchstart(ev) {
                    console.log("---开始触控---");
                    let {
                        clientX: startX,
                        clientY: startY
                    } = ev.changedTouches[0];
                    console.log('---startX,startY---', startX, startY);
                    this.startX = startX;
                    this.startY = startY;
                },
                touchemove(ev) {
                    // console.log("---移动中---", ev);
                    let {
                        clientX: moveX,
                        clientY: moveY
                    } = ev.changedTouches[0];

                    let xDirect = moveX - this.startX > 0 ? 'right' : 'left';
                    let yDirect = moveY - this.startY > 0 ? 'bottom' : 'top';

                    let xCut = Math.abs(moveX - this.startX);
                    let yCut = Math.abs(moveY - this.startY);

                    this.$nextTick(() => {
                        this.translateX += xDirect == 'left' ? parseInt(xCut) * -1 : parseInt(xCut);
                        this.translateY += yDirect == 'top' ? parseInt(yCut) * -1 : parseInt(yCut);
                        let oImgBox = document.getElementsByClassName("imgBox")[0];
                        oImgBox.style.transform = "scaleX(1) translateX(" + this.translateX +
                            "px) translateY(" + this.translateY + "px)";
                        let blurVal = (Math.abs(this.translateX) / 736) * 10;
                        oImgBox.style.filter = "blur(" + blurVal + "px)";
                    })


                    this.startX = moveX;
                    this.startY = moveY;
                    this.xDirect = xDirect;
                    this.yDirect = yDirect;
                },
                touchend(ev) {
                    console.log('---触控结束---', ev);
                    this.$nextTick(() => {
                        let oImgBox = document.getElementsByClassName("imgBox")[0];
                        if (
                            (this.translateX < 0 && this.translateX > -50) ||
                            (this.translateX > 0 && this.translateX < 50)
                        ) {
                            this.translateX = 0;
                            this.translateY = 0;
                            oImgBox.style.transition = "all 0.3s";
                            oImgBox.style.transform = "scaleX(1) translateX(" + this.translateX +
                                "px) translateY(" + this.translateY + "px)";

                            let timer = null;
                            timer = setTimeout(() => {
                                oImgBox.removeAttribute("style")
                                clearTimeout(timer)
                                timer = null;
                            }, 350)
                        } else {
                            oImgBox.style.transition = "all 0.3s";
                            oImgBox.style.transform = "scaleX(1) translateX(" + this.translateX * 10 +
                                "px) translateY(" + this.translateY * 10 + "px)";
                            oImgBox.style.zIndex = 99;
                            this.isFinish = true;

                            let timer = null;
                            timer = setTimeout(() => {
                                this.handleList();
                                this.isFinish = false;
                                this.translateX = 0;
                                this.translateY = 0;
                                oImgBox.removeAttribute("style");
                                clearTimeout(timer)
                                timer = null;
                            }, 350)
                        }
                    })

                }
            }
        })
    </script>
</body>

</html>